NextJS에서는 자체적으로 제공하는 Image 컴포넌트를 사용하기를 권장한다. 그 사용 방법은 매우 간단하나 정확한 사용법을 지키지 않은 경우, 브라우저에서 여러 종류의 경고를 안내하기 십상이다. 물론, 어디까지나 경고이기에 무시해도 무방하나.. 나는 이런 경고들을 무시하면 결국 문제가 된다고 생각하는 사람이기에, 경고도 에러와 똑같이 해결을 하고자 노력한다.

이미지를 원하는 넓이/높이 값을 지정하는 것은 매우 기초적이지만, 조금만 사용법이 틀려도 불만을 토하고 있는 브라우저를 확인할 수 있다. 따라서 이 글에서는 정확한 이미지 크기를 지정해 활용하는 방법에 대해 기록하고자 한다.

---

이미지의 크기/높이를 지정하는 방법은 두가지이다

1. css 스타일로 width, height 지정
2. fill 속성 부여(이미지가 absolute 속성에 width, height 100% 지정), 부모 영역에는 positon:relative, width, height 지정

Image 컴포넌트 자체의 width, height 속성은 넓이/높이를 지정하는 기능이 아니다. 이는 브라우저에게 이미지의 비율(aspect ratio)를 알려주어 공간을 예약(점유)하게 하는 기능으로, 로딩시 레이아웃 변경을 방지하기 위함임

첫번째 방법 사용시 다음의 허들이 있다.

• width/height를 모두 지정하게 되면, 경고가 발생한다.
• 이는 이미지를 가능한 원본 비율 그대로 보여주고자 하는 것이 기본이기 때문에 경고하는 것이다.
• 이 경고를 없애려면 한쪽만 값을 지정한 후, 나머지는 값을 auto로 설정해 사용해야 한다.

두번째 방법 사용시 다음의 허들이 있다.

• sizes 속성을 사용하지 않으면 경고가 발생한다.
• sizes 속성은 브라우저에게 해당 이미지가 대략적으로 어느 정도의 크기라고 미리 알려주는 기능이다.
• 브라우저는 이 값을 활용해, 서버에 이와 근접한 크기의 이미지를 요청한다
• 만일 이 값이 없으면, 브라우저는 항시 뷰포트와 같은 크기(100vw)로 가정한 이미지를 요구하게 되고, 이는 곧 불필요하게 큰 이미지를 다운받는 결과로 이어지게 된다.

---

결론: 나는 2번째 방법을 활용을 선호한다

2번 방법이 더 좋다고 말할 수는 없다. 일반적으로 이미지 표출은 원본 비율을 유지하며 보이는 것이 기본이기에, 이것만 생각하면 1번 방법이 더 편리할 수 있다.

그러나 나는 UI의 레이아웃을 지키는 것이 더 중요하다고 생각하기에, 이를 위해 width/height를 모두 지정가능한 2번을 좋아한다. 물론 이미지 비율을 포기하는 것도 아니다. object-fit: contain 속성을 가능한 사용토록하여 이미지도 원본 비율대로 노출하도록 한다.

2번 방안을 택한 이상, Image에 sizes 속성값을 부여해 주어야 한다. sizes 속성값을 제대로 활용하려면(=최적화하려면), 뷰포트 넓이에 따른 별도의 값을 지정하는게 맞는듯 하다.

• e.g. sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

그러나 이런 최적화까지는 굳이 필요한가 싶기 때문에.. 적당히 10vw로 고정시켜 놓고, 특별한 경우에만 별도의 값(e.g. 배경화면이라면 100vw, 너무 작은 아이콘이면 2vw)을 부여한 후 사용한다.